<script>
import { getToken } from '@/utils/auth'
import { guestLayout, userLayout } from '@/api/portal/user/layout'
import { getInfo } from '@/api/login'
import { guest } from '@/mixins/guest'
import GuestDefaultHeader from '@/portal4.1/pc/component/header/GuestDefaultHeader.vue'
import DefaultContent from '@/portal4.1/pc/component/content/GuestDefaultContent.vue'
import DefaultFooter from '@/portal4.1/pc/component/footer/GuestDefaultFooter.vue'
export default {
  name: 'PcDefaultIndex',
  components: { DefaultFooter, DefaultContent, GuestDefaultHeader },
  mixins: [guest],
  mounted() {
    // 查询布局
    this.initLayout()
    // 设置用户基本信息
    this.initUser()
  },
  methods: {
    initUser() {
      if (getToken()) {
        getInfo().then(res => {
          this.$store.commit('SET_USER', res.user)
        }).catch(() => {

        })
      }
    },
    // 查询布局信息
    initLayout() {
      if (getToken()) {
        userLayout().then(res => {
          const { data } = res
          this.$store.commit('SET_LAYOUT', data)
        })
      } else {
        guestLayout().then(res => {
          const { data } = res
          this.$store.commit('SET_LAYOUT', data)
        })
      }
    }
  }
}
</script>
<template>
  <div class="application-body" :style="headerBody">
    <!--  页头部分  -->
    <div class="application-header">
      <guest-default-header />
    </div>
    <!--  内容部分   -->
    <div class="custom-layout-content">
      <default-content />
    </div>
    <!--  页脚部分内容  -->
    <div class="custom-layout-footer">
      <default-footer />
    </div>
  </div>
</template>

<style lang="scss" scoped>
.application-body {
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0 auto;
  font-size: 16px;
  .application-header {
    width: 100%;
    height: 108px;
    background-color: var(--header-body-bak);
    padding: 0 calc(50% - 40.8rem);
  }
  .custom-layout-content {
    width: 100%;
    min-height: calc(100vh - 108px);
  }
  .custom-layout-footer {
    width: 100%;
    height: 170px;
  }
}
</style>
